<template>
	<view class="car-maintenance-page">
		<!-- 导航栏 -->
		<uni-nav-bar 
			:fixed="true" 
			:status-bar="true" 
			title="汽车保养" 
			left-icon="left" 
			background-color="#007AFF"
			color="#ffffff"
			:border="false"
			:shadow="false"
			@clickLeft="goBack">
		</uni-nav-bar>

	<!-- 导航栏下容器 -->
	<view class="nav-container"></view>

	<!-- 地图和门店信息容器 -->
	<view class="map-store-wrapper">
		<!-- 地图区域 -->
		<view class="map-container">
			<map 
				class="map"
				:latitude="latitude"
				:longitude="longitude"
				:markers="markers"
				:scale="14"
				:show-location="true"
				@markertap="onMarkerTap">
			</map>
			
			<!-- 自定义信息容器 -->
			<view v-if="infowindowVisible" class="info-window">
				<view class="info-content">
					<text class="info-title">商家名称: {{ selectedMarker?.title || '' }}</text>
					<text class="info-text">{{ selectedMarker?.info || '' }}</text>
					<view class="info-close" @click="closeInfoWindow">×</view>
				</view>
			</view>
		</view>

		<!-- 门店信息卡片 -->
		<view class="store-card">
			<!-- 上半部分：门店名称和距离 -->
			<view class="store-top-section">
				<view class="store-name-row">
					<text class="store-name">车百事汽车生活馆</text>
					<text class="store-distance">556m</text>
				</view>
			</view>
			
			<!-- 下半部分：左右布局 -->
			<view class="store-bottom-section">
				<!-- 左侧：评分、营业时间、位置信息 -->
				<view class="store-left-content">
					<view class="store-rating">
						<image 
							v-for="index in 4" 
							:key="index"
							src="/static/五星 拷贝@2x.png" 
							mode="aspectFit" 
							class="star-icon"
							:lazy-load="false">
						</image>
						<text class="rating-text">4分</text>
					</view>
					
					<view class="store-details">
						<view class="store-info-item">
							<text class="info-label">营业时间:</text>
							<text class="info-value">周一至周五 早上8:00-晚上22:00</text>
						</view>
						<view class="store-info-item">
							<text class="info-label">位置:</text>
							<text class="info-value">山阳区人民路与解放路交叉口</text>
						</view>
					</view>
				</view>
				
				<!-- 右侧：门店图片 -->
				<view class="store-image-wrapper">
					<image src="/static/mdtp.png" mode="aspectFill" class="store-image"></image>
				</view>
			</view>
		</view>
	</view>

	<!-- 底部操作按钮 -->
		<view class="action-buttons">
			<view class="action-btn contact-btn" @click="contactStore">
				<image src="/static/矩形 10 拷贝@2x.png" mode="aspectFill" class="btn-bg"></image>
				<image src="/static/电话@2x.png" mode="aspectFit" class="btn-icon"></image>
				<text class="btn-text">联系门店</text>
			</view>
			<view class="action-btn book-btn" @click="bookNow">
				<image src="/static/矩形 10 拷贝 2@2x.png" mode="aspectFill" class="btn-bg"></image>
				<image src="/static/预约@2x.png" mode="aspectFit" class="btn-icon"></image>
				<text class="btn-text">立即预定</text>
			</view>
		</view>
	</view>

	<!-- 联系门店弹窗 -->
	<view class="phone-dialog-mask" v-if="showPhoneDialog" @click="closePhoneDialog">
		<view class="phone-dialog" @click.stop>
			<view class="phone-number">{{ phoneNumber }}</view>
			<view class="dialog-divider"></view>
			<view class="dialog-btn" @click="copyPhoneNumber">复制</view>
			<view class="dialog-divider"></view>
			<view class="dialog-btn" @click="cancelDialing">取消拨号</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	// 地图中心坐标（河南理工大学）
	const latitude = ref(35.2150)
	const longitude = ref(113.2500)
	
	// 电话号码和弹窗控制
	const phoneNumber = ref('18642589456')
	const showPhoneDialog = ref(false)
	
	// 自定义信息容器控制
	const infowindowVisible = ref(false)
	const selectedMarker = ref(null)
	
	// 地图标记点
	// 中心标注点
	const centerLat = 35.2150
	const centerLng = 113.2500
	
	// 计算两点之间的距离（度）
	const calculateDistance = (lat1, lng1, lat2, lng2) => {
		const dLat = lat2 - lat1
		const dLng = lng2 - lng1
		return Math.sqrt(dLat * dLat + dLng * dLng)
	}
	
	// 创建9个随机分布的新标注点位置
	const createSurroundingMarkers = () => {
		const markers = []
		// 随机分布范围（约1-2公里范围，更随机）
		const minRange = 0.003
		const maxRange = 0.015
		// 最小距离（约300米，确保点之间不会太近）
		const minDistance = 0.003
		// 最大尝试次数，避免无限循环
		const maxAttempts = 100
		
		// 已存在的点列表（包括中心点）
		const existingPoints = [{ lat: centerLat, lng: centerLng }]
		
		// 生成9个随机位置
		for (let i = 0; i < 9; i++) {
			let attempts = 0
			let validPosition = false
			let newLat, newLng
			
			// 尝试生成一个距离其他点足够远的位置
			while (!validPosition && attempts < maxAttempts) {
				attempts++
				// 每个点使用不同的随机范围，增加随机性
				const range = minRange + Math.random() * (maxRange - minRange)
				// 生成随机角度和距离，使分布更自然
				const angle = Math.random() * Math.PI * 2 // 0到2π的随机角度
				const distance = Math.random() * range // 随机距离
				
				// 根据角度和距离计算偏移量
				const randomLatOffset = Math.cos(angle) * distance
				const randomLngOffset = Math.sin(angle) * distance
				
				newLat = centerLat + randomLatOffset
				newLng = centerLng + randomLngOffset
				
				// 检查与所有已存在点的距离
				validPosition = existingPoints.every(point => {
					const dist = calculateDistance(newLat, newLng, point.lat, point.lng)
					return dist >= minDistance
				})
			}
			
			// 如果找到了有效位置，添加到列表
			if (validPosition) {
				markers.push({
					id: i + 2, // 从2开始，1是中心点
					latitude: newLat,
					longitude: newLng,
					iconPath: '/static/位置 拷贝 8@2x.png',
					width: 24,
					height: 24,
					title: `门店${i + 2}`,
					info: `地址${i + 2},评分4.${Math.floor(Math.random() * 5)}`
				})
				// 将新点添加到已存在点列表
				existingPoints.push({ lat: newLat, lng: newLng })
			}
		}
		
		return markers
	}
	
	const markers = ref([
		{
			id: 1,
			latitude: centerLat,
			longitude: centerLng,
			iconPath: '/static/椭圆 3 拷贝 2@2x.png',
			width: 24,
			height: 32,
			title: '车百事汽车生活馆',
			info: '山阳区人民路与解放路交叉口,评分4.0',
			callout: {
				content: '车百事汽车生活馆',
				color: '#333333',
				fontSize: 12,
				borderRadius: 4,
				bgColor: '#ffffff',
				padding: 8,
				display: 'BYCLICK'
			}
		},
		...createSurroundingMarkers()
	])
	
	const goBack = () => {
		uni.navigateBack()
	}
	
	const goToStoreList = () => {
		uni.navigateTo({
			url: '/pages/store-list/store-list'
		})
	}
	
	// 点击地图标注时显示自定义信息容器
	const onMarkerTap = (e) => {
		// 根据markerId找到对应的标记
		const markerId = e.detail?.markerId
		selectedMarker.value = markers.value.find(obj => obj.id === markerId)
		
		if (selectedMarker.value) {
			infowindowVisible.value = true
		}
	}
	
	// 关闭信息窗口
	const closeInfoWindow = () => {
		infowindowVisible.value = false
		selectedMarker.value = null
	}
	
	// 显示联系门店弹窗
	const contactStore = () => {
		showPhoneDialog.value = true
	}
	
	// 关闭弹窗
	const closePhoneDialog = () => {
		showPhoneDialog.value = false
	}
	
	// 复制电话号码
	const copyPhoneNumber = () => {
		uni.setClipboardData({
			data: phoneNumber.value,
			success: () => {
				uni.showToast({
					title: '已复制',
					icon: 'success'
				})
				closePhoneDialog()
			}
		})
	}
	
	// 取消拨号
	const cancelDialing = () => {
		closePhoneDialog()
	}
	
	const bookNow = () => {
		// 立即预定功能已移除
	}
</script>

<style lang="scss" scoped>
	.car-maintenance-page {
		min-height: 100vh;
		background-color: #ffffff;
	}

	.nav-container {
		height: 100px;
		background-color: #007AFF;
		width: 100%;
	}

	/* 地图和门店信息容器 */
	.map-store-wrapper {
		position: relative;
		margin: -90px 10px 0 10px;
		padding: 15px 15px 0 15px;
		border-radius: 10px;
		background-color: #ffffff;
		height: 490px;
	}

	/* 地图容器 */
	.map-container {
		position: relative;
		width: 100%;
		height: 370px;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.nearby-stores-btn {
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		background-color: #FF9500;
		border-radius: 20px;
		padding: 8px 16px;
		display: flex;
		align-items: center;
		gap: 6px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		z-index: 10;
	}

	.nearby-stores-btn .btn-text {
		font-size: 14px;
		color: #ffffff;
		font-weight: 500;
	}

	/* 门店信息卡片 */
	.store-card {
		background-color: #ffffff;
		padding: 15px 0 0 0;
		box-sizing: border-box;
		position: relative;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		border-radius: 8px;
	}

	/* 上半部分：门店名称和距离 */
	.store-top-section {
		border-bottom: 1px solid #f0f0f0;
	}

	.store-name-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.store-name {
		font-size: 15px;
		font-weight: bold;
		flex: 1;
	}

	.store-distance {
		font-size: 12px;
		color: #007AFF;
		font-weight: 500;
		margin-left: 10px;
		flex-shrink: 0;
	}

	/* 下半部分：左右布局 */
	.store-bottom-section {
		display: flex;
		gap: 15px;
		align-items: flex-start;
	}

	/* 左侧内容：评分、营业时间、位置信息 */
	.store-left-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.store-rating {
		display: flex;
		align-items: center;
		gap: 4px;
		margin-top: 10px;
		margin-bottom: 10px;
		flex-wrap: nowrap;
	}

	.star-icon {
		width: 12px;
		height: 12px;
		min-width: 12px;
		min-height: 12px;
		margin-right: 2px;
		display: block;
		flex-shrink: 0;
		vertical-align: middle;
	}

	.star-empty {
		opacity: 0.3;
	}

	.rating-text {
		font-size: 11px;
		margin-left: 4px;
		color: #333333;
	}

	.store-details {
		display: flex;
		flex-direction: column;
	}

	.store-info-item {
		display: flex;
		margin-bottom: 8px;
		font-size: 11px;
		line-height: 1.5;
		align-items: flex-start;
	}

	.info-label {
		margin-right: 8px;
		flex-shrink: 0;
	}

	.info-value {
		flex: 1;
	}

	/* 右侧：门店图片 */
	.store-image-wrapper {
		width: 90px;
		height: 60px;
		margin-top: 15px;
		border-radius: 5px;
		overflow: hidden;
		flex-shrink: 0;
	}

	.store-image {
		width: 100%;
		height: 100%;
	}

	/* 底部操作按钮 */
	.action-buttons {
		display: flex;
		gap: 15px;
		padding: 15px;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	}

	.action-btn {
		flex: 1;
		height: 40px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		font-size: 16px;
		font-weight: 500;
		position: relative;
		overflow: hidden;
	}

	.btn-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.btn-icon {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
		position: relative;
		z-index: 1;
	}

	.action-btn .btn-text {
		color: #ffffff;
		font-size: 14px;
		position: relative;
		z-index: 1;
	}

	/* 联系门店弹窗 */
	.phone-dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 9999;
	}

	.phone-dialog {
		background-color: #ffffff;
		border-radius: 12px 12px 0 0;
		width: 100%;
		overflow: hidden;
		animation: slideUp 0.3s ease-out;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}

	.phone-number {
		padding: 30px 20px;
		text-align: center;
		font-size: 20px;
		font-weight: 500;
		color: #333333;
	}

	.dialog-divider {
		height: 1px;
		background-color: #e5e5e5;
	}

	.dialog-btn {
		padding: 18px 20px;
		text-align: center;
		font-size: 16px;
		color: #333333;
		background-color: #ffffff;
	}

	.dialog-btn:active {
		background-color: #f5f5f5;
	}

	/* 自定义信息容器 */
	.info-window {
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1000;
		width: 90%;
		max-width: 400px;
	}

	.info-content {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		position: relative;
	}

	.info-title {
		display: block;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10px;
	}

	.info-text {
		display: block;
		font-size: 14px;
		color: #666666;
		line-height: 1.5;
	}

	.info-close {
		position: absolute;
		top: 10px;
		right: 15px;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		color: #999999;
		cursor: pointer;
	}

	.info-close:active {
		color: #333333;
	}
</style>

<style lang="scss">
	/* 全局样式，用于覆盖组件内部样式 */
	.uni-navbar__content {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar--border {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar__header {
		border-bottom: none !important;
		border: none !important;
	}
</style>

